<template>
  <view class="form-section">
    <view class="section-header" @click="toggleCollapse">
      <text class="section-title">5. 综合评估</text>
      <IconFont 
        :name="isExpanded ? 'arrow-up' : 'arrow-down'" 
        size="10" 
        color="#8bc34a" 
        :class="['transition-transform duration-200', isExpanded ? 'rotate-180' : 'rotate-0']"
      />
    </view>
    <view v-show="isExpanded" class="section-content space-y-[16rpx]">
      <!-- 综合评估内容 -->
      <view class="assessment-content">
        <view class="assessment-grid">
          <!-- 认知功能评估 -->
          <view class="scale-category">
            <view class="category-header">
              <text class="category-icon">🧠</text>
              <text class="category-title">认知功能评估</text>
            </view>
            <view class="scale-items">
              <view class="scale-item">
                <text class="item-label">MMSE评分</text>
                <view class="input-placeholder">输入文字</view>
              </view>
              <view class="scale-item">
                <text class="item-label">MoCA评分</text>
                <view class="input-placeholder">输入文字</view>
              </view>
              <view class="scale-item">
                <text class="item-label">ADL评分</text>
                <view class="input-placeholder">输入文字</view>
              </view>
            </view>
          </view>

          <!-- 心理状态评估 -->
          <view class="scale-category">
            <view class="category-header">
              <text class="category-icon">💭</text>
              <text class="category-title">心理状态评估</text>
            </view>
            <view class="scale-items">
              <view class="scale-item">
                <text class="item-label">GDS评分</text>
                <view class="input-placeholder">输入文字</view>
              </view>
              <view class="scale-item">
                <text class="item-label">HADS评分</text>
                <view class="input-placeholder">输入文字</view>
              </view>
              <view class="scale-item">
                <text class="item-label">PHQ-9评分</text>
                <view class="input-placeholder">输入文字</view>
              </view>
            </view>
          </view>

          <!-- 疾病风险评估 -->
          <view class="scale-category">
            <view class="category-header">
              <text class="category-icon">🏥</text>
              <text class="category-title">疾病风险评估</text>
            </view>
            <view class="scale-items">
              <view class="scale-item">
                <text class="item-label">卒中风险</text>
                <view class="input-placeholder">输入文字</view>
              </view>
              <view class="scale-item">
                <text class="item-label">感染风险</text>
                <view class="input-placeholder">输入文字</view>
              </view>
              <view class="scale-item">
                <text class="item-label">低血糖风险</text>
                <view class="input-placeholder">输入文字</view>
              </view>
            </view>
          </view>

          <!-- 综合评分 -->
          <view class="scale-category highlight">
            <view class="category-header">
              <text class="category-icon">📈</text>
              <text class="category-title">综合评分</text>
            </view>
            <view class="scale-items">
              <view class="scale-item highlight-item">
                <text class="item-label">总体健康评分</text>
                <view class="input-placeholder highlight-input">输入文字</view>
              </view>
              <view class="scale-item highlight-item">
                <text class="item-label">护理等级</text>
                <view class="input-placeholder highlight-input">输入文字</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { IconFont } from '@nutui/icons-vue-taro'

interface Props {
  isExpanded: boolean
}

interface Emits {
  (e: 'toggle'): void
}

defineProps<Props>()
const emit = defineEmits<Emits>()

const toggleCollapse = () => {
  emit('toggle')
}
</script>

<style scoped lang="scss">
.form-section {
  background: white;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.section-header {
  padding: 24rpx;
  background: #f8f9fa;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background-color 0.2s;
  
  &:hover {
    background: #e9ecef;
  }
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.section-content {
  padding: 24rpx;
}

.assessment-content {
  .assessment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24rpx;
    
    @media (max-width: 768px) {
      grid-template-columns: 1fr;
    }
  }
  
  .scale-category {
    background: #f8f9fa;
    border-radius: 12rpx;
    padding: 20rpx;
    border: 2rpx solid #e9ecef;
    transition: all 0.3s ease;
    
    &:hover {
      border-color: #dee2e6;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    }
    
    &.highlight {
      background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
      border-color: #ffc107;
      box-shadow: 0 4rpx 16rpx rgba(255, 193, 7, 0.2);
    }
    
    .category-header {
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;
      
      .category-icon {
        font-size: 32rpx;
        margin-right: 12rpx;
      }
      
      .category-title {
        font-size: 28rpx;
        font-weight: bold;
        color: #495057;
      }
    }
    
    .scale-items {
      display: flex;
      flex-direction: column;
      gap: 12rpx;
      
      .scale-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16rpx;
        background: white;
        border-radius: 8rpx;
        border: 1rpx solid #dee2e6;
        transition: all 0.2s ease;
        
        &:hover {
          border-color: #adb5bd;
          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
        }
        
        &.highlight-item {
          background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
          border-color: #f59e0b;
          color: #92400e;
          font-weight: 600;
        }
        
        .item-label {
          font-size: 26rpx;
          color: #495057;
          font-weight: 500;
        }
        
        .input-placeholder {
          padding: 8rpx 16rpx;
          background: #f8f9fa;
          border: 1rpx solid #dee2e6;
          border-radius: 6rpx;
          font-size: 24rpx;
          color: #6c757d;
          min-width: 120rpx;
          text-align: center;
          transition: all 0.2s ease;
          
          &:hover {
            background: #e9ecef;
            border-color: #adb5bd;
          }
        }
        
        .highlight-input {
          background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
          border-color: #f59e0b;
          color: #92400e;
          font-weight: 600;
        }
      }
    }
  }
}
</style>
